<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!--=============== REMIXICONS ===============-->
    <link
      href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css"
      rel="stylesheet"
    />

    <!--=============== CSS ===============-->
    <link rel="stylesheet" href="assets/css/styles.css" />

    <title>dropdown menu</title>
  </head>
  <body>
    <div class="container">
      <div class="dropdown" id="dropdown-content">
        <button class="dropdown-button" id="dropdown-button">
          <i class="ri-user-3-line dropdown-icon"></i>
          <span class="dropdown-name">My profile</span>

          <div class="dropdown-icons">
            <i class="ri-arrow-down-s-line dropdown-arrow"></i>
            <i class="ri-close-line dropdown-close"></i>
          </div>
        </button>

        <ul class="dropdown-menu">
          <li class="dropdown-item">
            <i class="ri-message-3-line dropdown-icon"></i>
            <span class="dropdown-name">Messages</span>
          </li>

          <li class="dropdown-item">
            <i class="ri-lock-line dropdown-icon"></i>
            <span class="dropdown-name">Accounts</span>
          </li>

          <li class="dropdown-item">
            <i class="ri-settings-3-line dropdown-icon"></i>
            <span class="dropdown-name">Settings</span>
          </li>
        </ul>
      </div>
    </div>

    <!--=============== MAIN JS ===============-->
    <script src="assets/js/main.js"></script>
  </body>
</html>
